/* eslint-disable @typescript-eslint/no-unused-vars */
import type { VxeColumnProps, VxeGridProps } from 'vxe-table';

import { reactive } from 'vue';

// 扩展列类型以支持插槽

interface UseFosoGridProps extends VxeGridProps {
  requestApi?: (...args: any) => Promise<any>;
}
/**
 * 使用 FosoTable 的 hook 函数
 * @param options 配置选项
 * @returns 返回响应式的 gridOptions
 */
export const useFosoTableConfig = (options: UseFosoGridProps) => {
  const {
    columns,
    data = [],
    height = '',
    minHeight = '1000px',
    border = true,
    showOverflow = true,
    keepSource = true,
    align = 'center',
    importConfig = {},
    exportConfig = {},
    toolbarConfig = {
      refresh: true,
      import: true,
      export: true,
      zoom: true,
      custom: true,
      slots: {
        buttons: 'toolbarButtons',
        tools: 'toolbarTools',
      },
    },
    requestApi = () => Promise<any>,
    pagerConfig = {
      enabled: true,
      pageSize: 15,
      align: 'left',
      // 位置在左边
      background: true,
      pageSizes: [10, 20, 30, 50, 100, 200],
      className: 'mt-2 w-full justify-start',
      layouts: [
        'Total',
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
      ],
    },
    proxyConfig = {},

    ...otherOptions
  } = options;
  // 创建响应式的表格配置
  const gridOptions = reactive({
    // 基础配置
    border,
    showOverflow,
    height,
    minHeight,
    keepSource,
    align,

    // 列和数据
    columns: columns as {
      slots?: Record<string, string>;
    } & VxeColumnProps[],
    data,

    // 导入导出配置
    importConfig,
    exportConfig,

    // 工具栏配置
    toolbarConfig,
    // 分页配置
    pagerConfig,
    proxyConfig: {
      response: {
        result: 'data',
        total: 'total',
        list: 'data',
      },
      ajax: {
        query: async (page: any, customValues: any = {}, ..._args: any[]) => {
          // await new Promise((r) => setTimeout(r, 200)); // 强制延迟1秒
          const { currentPage, pageSize } = page.page;
          // 合并分页参数和查询参数
          const queryParams = {
            page: currentPage,
            pageSize,
            ...customValues,
          };
          const res = await requestApi(queryParams);
          return res;
        },
      },
    },
    // 其他配置项
    ...otherOptions,
  });

  return {
    gridOptions,
  };
};
